<template>
    <div class="home-scroll" v-if="scrollGoods && scrollGoods.length">
        <el-card class="box-card" shadow="hover">
            <!-- 头部标题 -->
            <template #header>
                <div class="card-header">
                    <span>猜猜你喜欢</span>
                </div>
            </template>
            <el-scrollbar height="600px">
                <!-- 无限滚动 -->
                <div
                    class="scroll-body"
                    v-infinite-scroll="load"
                    infinite-scroll-immediate="true"
                    infinite-scroll-distance="500"
                >
                    <template
                        v-for="goods in scrollGoods"
                        ::key="Math.random().toString()"
                    >
                        <GoodsItem :goods="goods" />
                    </template>
                </div>
            </el-scrollbar>
        </el-card>
    </div>
</template>

<script setup>
import { findHotLike } from '@/apis/home'
import { computed, reactive, watch, ref } from 'vue'
const scrollGoods = ref([])
const Data = async () => {
    const data = await findHotLike()
    scrollGoods.value = scrollGoods.value.concat(data)
}
Data()
const load = () => {
    Data()
}
</script>

<style lang="scss" scoped>
.home-scroll {
    width: 100vw;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .el-card {
        height: 600px;
        width: 1200px;
        display: flex;
        flex-direction: column;
    }
    .card-header {
        > span {
            font-size: 18px;
        }
    }
    .scroll-body {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        height: 600px;
    }
}
</style>
